<template>
    <div class="ul_box">
      <ul>
        <li
         v-for="(value,index) in list"
         :key="index"
         @click="handleGetList(value.linkData.linkDes)"
        >
          <span class="iconfont">&#xe600;34.1万</span>
          <img :src="value.linkData.linkPicUrl"  alt="">
          <p>{{value.linkData.linkTitle}}</p>
        </li>
      </ul>
    </div>
</template>

<script lang='ts'>
import { Vue,Component,Prop } from 'vue-property-decorator'
import { get } from '@u/http.ts'
@Component({})
export default class UlNav extends Vue{
  $router
  list = [ ]
  MusicList = []
  newMusicList = []
  mounted () {
    const getData = async()=>{
      const res = await  get({
        url:'/api/migu/list',
        params:{
          migu_url:'https://m.music.migu.cn/migu/remoting/cms_list_tag?pageSize=10&nid=23853969&pageNo=0&type=2006',
        },
      })
      this.list = res.data.result.results
    }
    getData()
  }
  handleGetList(id): void {
    this.$router.push({
    // this['router'].push({
      path:`/songlist/`,
      query:{
        id
      }
    })
    
  }
}
</script>

<style lang="stylus" scoped>
    h2
      font-size .17rem
      font-weight 400
      padding-left .09rem
      margin  .14rem 0
      border-left 3px #d43c33 solid 
    .ul_box
      width 100%
      padding-bottom  .24rem

      ul
        width 100%
        display flex
        justify-content space-between
        flex-wrap wrap
        li 
          margin-bottom .16rem
          width 1.36rem
          position relative

          span 
            position absolute
            right .05rem
            top .02rem
            color #fff
            font-size .12rem
          img 
            width 1.36rem
            height 1.36rem

          p
            padding 0.06rem 0.02rem 0 0.06rem
            font-size .13rem
            height  .36rem


</style>